<template>
	<div id="mapContainer"></div>
</template>

<script>
	import QRCode from 'qrcodejs2'
	export default {
		name: "CsmMap",
		data() {
			return {
				detail: null,
				map: {},
				infoWindow: {},
				mapCenter: { lat: 26.655302, lng: 106.633387 },
			};
		},

		mounted () {
			this.interval = setInterval(() => {
				if(this.detail){
					clearInterval(this.interval);
					this.initMap();
				}
			}, 1000);
		},

		methods: {
			setDetail(val){
				this.detail = {...val};
			},
			changeMap(val){
				if(this.infoWindow){
					this.detail = {...val};
					this.infoWindow.close()
					this.setMapData()
				}
			},
			//初始化地图
			initMap: function () {
				let center = new TMap.LatLng(this.detail.latitude, this.detail.longitude);
				let map = new TMap.Map(document.getElementById("mapContainer"), {
					center: center, //设置地图中心点坐标
					zoom: 17.2, //设置地图缩放级别
					pitch: 43.5, //设置俯仰角
					rotation: 45, //设置地图旋转角度
				});
				this.map = map;
				this.setMapData()
			},

			setMapData(){
				let box = document.getElementById("mapTop")
				if(box){
					box.remove()
				}
				//弹出内容
				let info = [];
				info.push("<div class='mapInfoWindow' id='mapTop'>");
				info.push("<div class='title'>");
				info.push("<div class='name'>"+this.detail.csName+"</div>");
				info.push("<div class='type'>"+this.detail.typeSecond+"</div>");
				info.push("</div>");
				info.push(
					"<div class='address'><img src='/image/ico01.png'/>"+this.detail.fullAddress+"</div>"
				);
				// info.push("<div class='qr'><img src='"+this.detail.csmCode+"'/></div>");
				info.push("<div class='qr' id='qrCode'></div>");
				// info.push(
				// 	"<div class='qrInfo'><span class='green'>• 启用中</span> NO:202203123821</div>"
				// );
				info.push("</div>");

				//设置弹出窗
				var infoWindowLocation = new TMap.LatLng(
					this.detail.latitude,
					this.detail.longitude
				);
				//创建InfoWindow实例，并进行初始化
				var infoWindow = new TMap.InfoWindow({
					map: this.map,
					position: infoWindowLocation,
					//设置infoWindow，content支持直接传入html代码，以实现各类内容格式需求
					content: info.join(""),
				});
				this.infoWindow = infoWindow

				//设置地图中心点
				this.map.setCenter(new TMap.LatLng(this.detail.latitude, this.detail.longitude));

				this.createQrCode(this.detail.csmCode)
			},
			createQrCode(url, id) {
        var qrcode = new QRCode(document.getElementById("qrCode"), {
            text: url, // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    	}
			
		},
	};
</script>

<style>
	.mapInfoWindow {
		padding-bottom: 10px;
		min-width: 300px;
	}

	.mapInfoWindow > .title {
		display: flex;
		justify-content: space-between;
	}

	.mapInfoWindow > .title > .name {
		font-weight: bold;
	}

	.mapInfoWindow > .title > .type {
		color: #5d8aff;
		font-size: 0.8rem;
		background-color: #edf2ff;
		padding: 5px;
		border-radius: 3px;
	}

	.mapInfoWindow > .address {
		font-size: 0.8rem;
		margin-top: 5px;
		color: #979fb9;
		border-bottom: solid 1px #e6e6e6;
		padding-bottom: 20px;
		text-align: left;
		display: flex;
		align-items: center;
	}

	.mapInfoWindow > .address > img {
		width: 20px;
		height: auto;
		display: block;
	}

	.mapInfoWindow > .qr {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mapInfoWindow > .qr > img {
		width: 120px;
		height: auto;
		display: block;
		border: solid 5px #a5efb9;
	}

	.mapInfoWindow > .qrInfo {
		margin: 20px auto 0px auto;
		font-size: 0.9rem;
		background-color: #fafafa;
		width: fit-content;
		padding: 5px 20px 5px 20px;
		border-radius: 10px;
	}

	.mapInfoWindow > .qrInfo > .green {
		color: #33e378;
	}
</style>